<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>国际金融中心</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->

    <script src="/pages/base.js"></script>

    <link rel="stylesheet" href="/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <!-- 内容头部 -->
    <section class="content-header">
        <h1>
            角色权限
            <small>角色权限</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="all-order-manage-list.html">角色权限</a></li>
            <li class="active">角色权限</li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content" id="app">

        <!--用户信息-->
        <div class="panel panel-default">
            <div class="panel-heading">角色权限</div>
            <!--
                权限树
            -->
            <ul id="treeDemo" class="ztree"></ul>


        </div>
        <!--用户信息/-->

        <!--工具栏-->
        <div class="box-tools text-center">
            <button type="button" @click="updateRolePermission" class="btn bg-maroon">保存</button>
            <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
        </div>
        <!--工具栏/-->

    </section>
    <!-- 正文区域 /-->

</div>

<!-- 内容区域 /-->
<script>
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    new Vue({
        el:"#app",
        data:{
            treeObj:null,
            roleId:0
        },
        methods:{
            findRolePemission(){
                // 获取角色id
                this.roleId = getParameter("id");
                // 根据id查询
                axios.get('/permission/role/'+this.roleId).then(resp=>{
                    let resultInfo = resp.data;
                    if (resultInfo.success){
                        // 创建ztree对象；参数1：显示ztree的区域；
                        // 参数2：固定参数，表示ztree的设置； 参数3：ztree的数据 （最重要）
                        this.treeObj = $.fn.zTree.init($("#treeDemo"), setting, resultInfo.data);
                    }
                })
            },
            updateRolePermission(){
                // 获取选中的树的节点:nodes=[{ id:1, pId:0, name:"随意勾选 1", open:true},{}]
                let nodes = this.treeObj.getCheckedNodes(true);
                // 保存角色权限，只需要权限id即可；所以这里定义一个权限数组
                let permissions = new Array();
                for(let i=0; i<nodes.length; i++){
                    permissions[i] = nodes[i].id;
                }
                // 定义json，封装请求参数
                let param = {
                    roleId: this.roleId,
                    permissions: permissions
                }
                // 请求后台，实现角色分配权限
                axios.put('/permission/role',param).then(resp=>{
                    let resultInfo = resp.data;
                    if (resultInfo.success) {
                        // 操作成功，跳转到角色列表
                        location.href = '/pages/role/role-list.html';
                    }
                })
            }

        },
        created(){
            this.findRolePemission();
        }
    });
</script>
</body>

</html>